﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link href="~/lib/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" />
    <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css" rel="stylesheet" />
    <link href="~/lib/eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet" />
    <link href="~/css/bootstrap-admin.css" rel="stylesheet" />
    <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>

<body class="bg-body-tertiary py-3">

    <div class="container-fluid">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <!--  表格上方左侧的工具条区域    -->
                <div id="toolbar" class="d-flex flex-wrap gap-2 mb-2">
                    <button class="btn btn-light add-btn">
                        <i class="bi bi-plus"></i> 保存
                    </button>
                </div>
                <!--  数据表格    -->
                <table id="table"></table>
            </div>
        </div>
    </div>
    <!--回到顶部开始-->
    <a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
    <!--回到顶部结束-->

    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/popperjs/core/dist/umd/popper.min.js"></script>
    <script src="~/lib/eonasdan/tempus-dominus/dist/js/tempus-dominus.min.js"></script>
    <script src="~/lib/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="~/lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="~/lib/bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
    <script src="~/lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
    <script src="~/lib/bootstrap-select/dist/js/i18n/defaults-zh_cn.min.js"></script>
    <script src="~/js/bootstrap-admin.js"></script>
    <script src="~/js/app.js"></script>

    <script>
        var tableName = "@ViewBag.TableName";
        var projectId = "@ViewBag.ProjectId";
        $(document).ready(function () {
            // 新增
            $('.add-btn').on('click', function () {
                var arr = $('#table').bootstrapTable('getData');
                //得到序列化数据
                $.ajax({
                    url: "/Table/SaveConfig",
                    method: 'post',
                    data: { columns: arr },
                    success: function (res) {
                        //添加成功
                        $.toasts({
                            type: 'success',
                            content: '添加成功',
                            delay: 1000,
                            autohide: true,
                            onHidden: function () {
                                parent.modalInstance.setData(true);
                                parent.modalInstance.close();
                            }
                        })
                    }
                })
            })
            /**
             * columns表示列，里面的对象 title是表头信息，field是服务端返回的字段名称
             * 1.不做分页，返回的数据格式是 [{},{}]
             * 2.如果要开启分页，需要配置pagination:true, sidePagination:'client|server'
             * 3.客户端分页所需要的格式和不做分页时是一样的 都是 :[{},{}]
             * 4.服务端分页返回的格式为：{rows:[{},{}],total:200}
             * 参考：https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data2.json
             */
            $('#table').bootstrapTable({
                url: '/Table/GetColumnList?projectId=' + projectId + '&tableName=' + tableName,
                responseHandler: function (res) {
                    return res;
                },
                //是否开启分页
                pagination: false,
                // 唯一ID字段
                uniqueId: 'id',
                // 每行的唯一标识字段
                idField: 'id',
                //列
                columns: [
                    {
                        title: 'ID', field: 'id', align: 'center',
                    },
                    {
                        title: '列名', field: 'name', align: 'left'
                    },
                    {
                        title: '列备注', field: 'description', align: 'left'
                    },
                    {
                        title: '列类型', field: 'columnType', align: 'left'
                    },
                    {
                        title: '字段名', field: 'fieldName', align: 'left'
                    },
                    {
                        title: '字段类型', field: 'fieldType', align: 'left'
                    },
                    {
                        title: '查询方式', field: 'queryType', align: 'center',
                        formatter: formatQueryType,
                        events: {
                            'change .queryType': function (event, value, row, index) {
                                event.preventDefault();
                                event.stopPropagation();
                                let queryType = $(event.target).val();
                                row.queryType = queryType;
                                //console.log($('#table').bootstrapTable('getData'));
                            }
                        }
                    },
                    {
                        title: '显示类型', field: 'htmlType', align: 'center',
                        formatter: formatHtmlType,
                        events: {
                            'change .htmlType': function (event, value, row, index) {
                                event.preventDefault();
                                event.stopPropagation();
                                console.log("htmlType");
                                row.htmlType = $(event.target).val();
                            }
                        }
                    },
                    {
                        title: '字典类', field: 'dictType', align: 'center',
                        formatter: formatDictType,
                        events: {
                            'change .dictType': function (event, value, row, index) {
                                event.preventDefault();
                                event.stopPropagation();
                                console.log("dictType");
                                row.dictType = $(event.target).val();
                            }
                        }
                    }
                ]
            });

            //格式化列数据演示 val:当前数据 rows:当前整行数据
            function formatQueryType(val, rows) {

                let html = `<select class='queryType' name="queryType">
                                                                                                        <option value="=">=</option>
                                                                                                         <option value="!=">!=</option>
                                                                                                        <option value=">">></option>
                                                                                                          <option value=">=">>=</option>
                                                                                                        <option value="<"><</option>
                                                                                                        <option value="<="><=</option>
                                                                                                         <option value="like">like</option>
                                                                                                        <option value="between ">between</option>
                                                                                                      </select>`

                return html;

            }
            //格式化列数据演示 val:当前数据 rows:当前整行数据
            function formatHtmlType(val, rows) {

                let html = `<select class='htmlType' name="htmlType">
                                                                                                    <option value="0">文本框</option>
                                                                                                    <option value="1">文本域</option>
                                                                                                    <option value="2">下拉框</option>
                                                                                                    <option value="3">单选框</option>
                                                                                                    <option value="4">复选框</option>
                                                                                                    <option value="5">日期框</option>
                                                                                                    <option value="6">图片上传</option>
                                                                                                    <option value="7">文件上传</option>
                                                                                                    <option value="8">富文本</option>
                                                                                                      </select>`

                return html;

            }

            //格式化列数据演示 val:当前数据 rows:当前整行数据
            function formatDictType(val, rows) {

                let html = `<select class='dictType' name="dictType">
                                                                                                <option value="0">所有</option>
                                                                                                <option value="1">正常</option>
                                                                                                <option value="2">停用</option>
                                                                                              </select>`

                return html;
            }

        });
    </script>

</body>
</html>
